<template>
  <div class="suggest">
    <el-button
      style="float: right; margin-right: 150px"
      type="primary"
      @click="centerDialogVisible = true"
      >建议 / 投诉</el-button
    >
    <SuggestTable
      @search="search"
      ref="info"
      :data="tableData"
      @replay="replay"
    />
    <el-dialog
      title="投诉 / 建议"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      :before-close="prvent"
      v-if="centerDialogVisible"
    >
      <SuggestForm ref="suggest" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">上 传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SuggestForm from "./SuggestForm.vue";
import SuggestTable from "./SuggestTable.vue";

export default {
  name: "Suggest",
  data() {
    return {
      centerDialogVisible: false,
      tableData: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    search(type) {
      this.axios.get("/api/v1/suggest", { params: { type } }).then((res) => {
        this.tableData = res.data;
      });
    },
    replay(data, index) {
      this.tableData.splice(index, 1, data);
      this.tableData = JSON.parse(JSON.stringify(this.tableData));
    },
    clear() {
      this.$refs.suggest.ruleForm = {
        contact: "",
        text: "",
      };
    },
    upload() {
      //   console.log(this.$refs.suggest.ruleForm);
      let data = this.$refs.suggest.ruleForm;
      if (data.text.length > 4) {
        this.axios
          .put("/api/v1/suggest/add", {
            data,
          })
          .then((res) => {
            // console.log(res);
            if (res.code == 1) {
              this.$refs.suggest.ruleForm = {
                contact: "",
                text: "",
              };
              this.tableData.push(res.data);
              this.tableData = JSON.parse(JSON.stringify(this.tableData));
              this.centerDialogVisible = false;
              this.msg(res, this);
            }
          });
      } else {
        this.$message({
          type: "warning",
          message: "请输入5-200个字符",
        });
      }
    },
    prvent() {
      this.$confirm("确定关闭吗？数据会丢失", "警告", {
        type: "warning",
      }).then(() => {
        this.centerDialogVisible = false;
      });
    },
  },
  created() {
    this.axios.get("/api/v1/suggest").then((res) => {
      this.tableData = res.data;
    });
  },
  mounted() {},
  components: { SuggestForm, SuggestTable },
};
</script>
<style scoped>
</style>